{%- liquid
  assign text_color = 'text-body'
  if settings_text_color == 'white'
    assign text_color = 'text-inverse'
  endif
-%}
<form class="as-cart-with-items mini-cart cart-with-items {{ text_color }} {% if cart.items.size == 0 %} is-empty{% endif %} pb-5" 
  action="{{ routes.cart_url }}" 
  method="post" 
  id="cart" 
  novalidate>
  <div class="px-4 pt-5 mini-cart-content">
    <p class="mb-4 as-cart-count cart-count-tips">{{ 'sections.cart.cart_count' | t: count: cart.items.size }}</p>
    {% assign thumbnail_width = '4rem' %}
    <div class="as-cart-items">
      <ul class="as-cart-items-list list-group list-group-flush">
        {% for item in cart.items %}
        <li class="list-group-item px-0 py-4 bg-transparent">
          <div>
            <div class="position-relative float-start" style="width: {{ thumbnail_width }};">
              <img width="64" height="{{ 64 | divided_by: item.image.aspect_ratio | ceil }}"
                loading="lazy"
                src="{{ item.image | img_url: '64x' }}" 
                srcset="{{ item.image | img_url: '64x' }} 1x, {{ item.image | img_url: '160x' }} 2x, {{ item.image | img_url: '240x' }} 3x"
                alt="{{ item.image.alt | escape }}" 
                class="img-fluid bg-jasmine">
              {% comment %}Image{% endcomment %}
              <a class="stretched-link" {% if item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ item.url | within: collections.all }}"></a>
            </div>
            <div class="ps-3" style="margin-left: {{ thumbnail_width }};">
              <div class="row">
                <div class="col-8">
                  <div class="d-flex justify-content-between">
                    <a class="link text-decoration-none" style="max-width: 15rem;" {% if item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ item.url }}"><span class="fw-bold text-break">{{ item.product.title | escape }}</span>{% unless item.variant.title contains 'Default' %}<br><span class="small">{{ item.variant.title | escape }}</span>{% endunless %}</a>
                  </div>
                  {%- comment -%}Cart Item Price{%- endcomment -%}
                  <div class="mt-0 mb-0 small">
                    <span class="me-2">{{ item.final_price | money }}</span><span>×{{ item.quantity }}</span>
                  </div>
                  
                  {%- comment -%}Consumer Customized Message{%- endcomment -%}
                  {%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
                    <dl class="mb-0 text-accent small" data-has-only-default-variant="{{ item.product.has_only_default_variant }}" data-properties-size="{{ item.properties.size }}" data-selling-plan-allocation="{{ item.selling_plan_allocation }}">
                      {%- for property in item.properties -%}
                        {%- assign property_first_char = property.first | slice: 0 -%}
                        {%- if property.last != blank and property_first_char != '_' -%}
                          <div class="item-customized-property">
                            <dt class="d-inline">{{ property.first }}: </dt>
                            <dd class="d-inline">
                              {%- if property.last contains '/uploads/' -%}
                                <a {% if property.last contains 'https://' %} rel="nofollow" {% endif %} href="{{ property.last }}" target="_blank">
                                  {{ property.last | split: '/' | last }}
                                </a>
                              {%- else -%}
                                {{ property.last }}
                              {%- endif -%}
                            </dd>
                          </div>
                        {%- endif -%}
                      {%- endfor -%}
                    </dl>
                    {%- comment -%}Subscriptiont Purchase{%- endcomment -%}
                    <p class="mb-0 text-accent small item-customized-property">{{ item.selling_plan_allocation.selling_plan.name }}</p>
                  {%- endif -%}
  
                  {% for discount in item.discounts %}
                  <p class="mb-0 small text-accent">{{ discount.title }}</p>
                  {% endfor %}
                </div>
                <div class="col-4">
                  <div class="d-flex align-items-center justify-content-between justify-content-lg-end">
                    <div class="text-end me-2 small">
                      {%- if item.original_line_price != item.final_line_price -%}
                        <span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
                        <span class="fw-bold">{{ item.final_line_price | money }}</span>
                        <br>
                        <del>{{ item.original_line_price | money }}</del>
                      {%- else -%}
                        <span class="fw-bold">{{ item.original_line_price | money }}</span>
                      {%- endif -%}
                    </div>
                  </div>
                </div>
              </div>
              {%- if settings.show_remove_button_in_mini_cart -%}
                <div class="row">
                  <div class="col-8"></div>
                  <div class="col-4 text-end">
                    <div id="remove-{{ item.index | plus: 1 }}" 
                      class="as-remove-cart-item d-inline-block mt-2 small" 
                      data-variant-id="{{ item.variant_id }}" 
                      data-index="{{ item.index | plus: 1 }}" 
                      data-quantity="{{ item.quantity }}">
                      <a href="{{ item.url_to_remove }}" 
                        class="as-remove-link small link-muted text-muted" 
                        aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}" 
                        data-variant-id="{{ item.variant_id }}" 
                        data-index="{{ item.index | plus: 1 }}"
                        data-quantity="{{ item.quantity }}">
                        {% if settings.icon_style == "garbage_can" %}
                          {% render 'icon-remove' %}
                        {% else %}
                          {{ 'sections.cart.remove' | t }}
                        {% endif %}
                      </a>
                  </div>
                  </div>
                </div>
              {%- endif -%}
            </div>
          </div>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <hr class="my-0">

  <div class="mx-4">
    <div class="mt-5">
      <ul class="list-unstyled as-cart-summary">
        {%- comment -%}Cart Total{%- endcomment -%}
        {% if cart.original_total_price > cart.total_price %}
        <li class="d-flex justify-content-between mb-1 text-muted">
          <span class="me-2 small">{{ 'sections.cart.subtotal' | t }}</span>
          <span class="text-nowrap small">{{ cart.original_total_price | money_with_currency }}</span>
        </li>
        {% endif %}
  
        {%- comment -%}
          {%- if cart.cart_level_discount_applications.size > 0 -%}
          {%- for discount in cart.cart_level_discount_applications -%}
            <li class="d-flex justify-content-between mb-1 text-muted">
              <span class="me-2 small">{{ discount.title }}</span>
              <span class="ms-auto text-nowrap small">- {{ discount.total_allocated_amount | money_with_currency }}</span>
            </li>
          {%- endfor -%}
          {%- endif -%}
        {%- endcomment -%}

        {%- if cart.discount_applications.size > 0 -%}
        {%- for discount in cart.discount_applications -%}
          <li class="d-flex justify-content-between mb-1 text-muted">
            <span class="me-2 small">{{ discount.title }}</span>
            <span class="ms-auto text-nowrap small">- {{ discount.total_allocated_amount | money_with_currency }}</span>
          </li>
        {%- endfor -%}
        {%- endif -%}
  
        <li class="d-flex align-items-center justify-content-between fw-bold mb-3">
          <span class="me-2 mb-0">{{ 'sections.cart.total' | t }}</span>
          <span class="mb-0 text-nowrap">{{ cart.total_price | money_with_currency }}</span>
        </li>
      </ul>
  
      <small class="text-muted">
        {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
          {{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
        {%- elsif cart.taxes_included -%}
          {{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
        {%- elsif shop.shipping_policy.body != blank -%}
          {{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
        {%- else -%}
          {{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
        {%- endif -%}
      </small>
    </div>
  
    <div class="mt-5 d-flex flex-column">
      <div class="cart-ctas as-cart-checkout">
        <noscript>
          <button type="submit" class="btn btn-outline-primary btn-mw w-100 mb-2 as-btn-cart-update" form="cart">
            {{ 'sections.cart.update' | t }}
          </button>
        </noscript>
  
        <button type="submit" class="btn btn-primary btn-mw w-100 as-btn-cart-checkout" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
          {{ 'sections.cart.checkout' | t }}
        </button>
      </div>
  
      {%- assign show_dynamic_checkout_buttons = false -%}
      {%- if settings.show_dynamic_checkout_buttons -%}
        {%- if additional_checkout_buttons -%}
          {%- assign show_dynamic_checkout_buttons = true -%}
          <div class="cart-dynamic-checkout-buttons additional-checkout-buttons additional-checkout-buttons--vertical as-additional-checkout-buttons">
            {{ content_for_additional_checkout_buttons }}
          </div>
        {%- endif -%}
      {%- endif -%}
      
      {%- if settings.show_view_cart_button_in_mini_cart -%}
        <div class="text-center{% if show_dynamic_checkout_buttons %} mt-2{% else %} mb-2 order-first{% endif %}">
          <a href="{{ routes.cart_url }}" 
            class="btn{% if show_dynamic_checkout_buttons %} btn-link link-primary{% else %} btn-outline-primary btn-mw w-100{% endif %}" 
            aria-label="{{ 'sections.cart.view_cart' | t }}">{{ 'sections.cart.view_cart' | t }}</a>
        </div>
      {%- endif -%}
    </div>
  </div>
</form>

<div class="as-empty-cart empty-cart align-items-center justify-content-center {{ text_color }}">
  <div class="d-flex flex-column w-100">
    <p class="px-4 py-5 mb-0 text-center">{{ 'sections.cart.empty_content' | t }}</p>
    <hr class="my-0">
    <div class="d-grid text-center px-4 py-5">
      <a class="btn btn-outline-primary as-cart-continue-shopping btn-mw" 
        {% if settings.continue_shopping_link contains 'https://' %}
          target="_blank" rel="nofollow"
        {% endif %}
        href="{{ settings.continue_shopping_link }}">{{ 'general.cart.continue_shopping' | t }}</a>
    </div>
  </div>
</div>